<script>
export default {
  name: "MaterialPage",
  data () {
    return {
      tableData: [
        {
          name: '大米1',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米2',
          stock: 2,
          warningStock: 10,
          status: '禁用',

        },
        {
          name: '大米3',
          stock: 111,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米4',
          stock: 109,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米5',
          stock: 3,
          warningStock: 10,
          status: '禁用',

        },
        {
          name: '大米6',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米7',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米8',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米9',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米10',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米11',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米12',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米13',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米14',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米15',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米16',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米17',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米18',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米19',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
        {
          name: '大米20',
          stock: 100,
          warningStock: 10,
          status: '正常',

        },
      ],
      currentPageData:[]
    }
  },
  methods: {
    handelCurrentChange(current) {
      this.refreshCurrentPageData(current)
    },
    refreshCurrentPageData(current) {
      this.currentPageData = []
      for (let i = (current - 1) * 10; i < (current) * 10; i ++) {
        this.currentPageData.push(this.tableData[i])
      }
    }
  },
  created() {
    this.refreshCurrentPageData(1)
  }

}
</script>

<template>
  <div style="padding: 20px">
    <el-card>
      <div slot="header">
        <span>物资列表页面</span>
      </div>
      <div>
        <el-table :data = "currentPageData" stripe border>
          <el-table-column label="物资名称" width="200">
            <template v-slot="scope">
              <el-tag>{{scope.row.name }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="物资库存数量" prop="stock" width="200"></el-table-column>
          <el-table-column label="物资库存预警值" prop="warningStock" width="200"></el-table-column>
          <el-table-column label="物资状态 (正常 | 禁用)" prop="status" width="200"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
              <el-button type="danger" size="mini" plain icon="el-icon-delete-solid">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :total="tableData.length"
                       background
                       style="margin-top: 15px"
                       @current-change="handelCurrentChange"
                       @size-change="handelSizeChange"
                       layout="sizes,prev,pager,next,jumper,total"/>
      </div>
    </el-card>

  </div>
</template>

<style scoped>

</style>